<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器、元素选择器
					特点：影响所有叫这个名称的标签
			 */
			.div1 {
				width: 200px;
				height: 200px;
				background-color: #00FFFF;
				margin: 10px;
				padding: 5px;
				border-style: solid;
				border-width: 20px;
			}
			
			.div2 {
				width: 200px;
				height: 200px;
				background-color: black;
				margin: 10px;
				padding: 10px;
			}
			
			.div3 {
				background-color: red;
				width: 20px;
				height: 20px;
				padding: 140px;
				margin: 20px;
			}
			
			.div4 {
				background-color: red;
				width: 100px;
				padding: 100px;
			}
			
			.div5 {
				width: 200px;
				height: 200px;
				border-radius: 110px;
				border-style: solid;
				/* border-top-color: red;
				border-right-color: blue;
				border-bottom-color: yellow; */
				border-color: red blue yellow black;
				border-width: 10px;
			}
			
			.div6 {
				background-color: black;
				width: 300px;
				height: 300px;
				border-radius: 200px;
				padding: 50px;
			}
			
			/* 子元素选择器 */
			.div6>div {
				background-color: white;
				width: 200px;
				height: 200px;
				border-radius: 150px;
				padding: 50px;
			}
			
			.div6>div>div {
				background-color: #0597d2;
				width: 100px;
				height: 100px;
				border-radius: 100px;
				padding: 50px;
			}
			
			.div6>div>div>div {
				background-color: red;
				width: 50px;
				height: 50px;
				border-radius: 50px;
				padding: 50px;
			}
			
			.div7 {
				box-sizing: border-box;
				width: 100px;
				height: 100px;
				padding: 30px;
				background-color: #00FFFF;
				border: 10px solid red;
				margin: 10px;
			}
			
			input {
				border: none;
				background-color: red;
				outline: none;
			}
			/* 
			 background-size
				cover：尽量拉伸图片，将宽度或高度最小的值适应到元素的宽或高
				contain：尽量拉伸图片，将宽度或高度最大的值适应到元素的宽或高
			 */
			button {
				background-image: url(../img/btn_login_p.png);
				background-color: transparent;
				background-size: 100% 100%;
				width: 100px;
				height: 50px;
				border: none;
				outline: none;
			}
		</style>
	</head>
	<body>
		所有标签都适用盒子模型，大盒子(块级元素)和小盒子(内联元素)
		<br>
		块级元素：有宽度和高度，有上下左右四个内边距和外边距
		宽度=width + padding + border
		margin：指定的外边距，盒子离父标签和平级元素的边框线的距离
				
		padding：内容和元素的边框线的间距
		<br>
		内联元素：没有宽度和高度，只有左右两个内边距和外边距
		
		<div class="div1">
			这是内容
		</div>
		
		<div class="div2">
			
		</div>
		<!-- 请实现一个宽高为300的div，正方形
				且内容是居中，只能通过padding来实现居中，不能
				通过text-align，line-height实现
				300 = width + padding * 2
				
				将内容换成一个宽高为100的div
		 -->
		 <div class="div3">
		 	中
		 </div>
		 
		 <div class="div4">
		 	<div style="width: 100px;height: 100px; background-color: #000000;">
		 		
		 	</div>
		 </div>
		 
		 <!-- 
			实现一个圆形的div
			四个边框的颜色不一样
			都使用实线
		  -->
		  <br>
		  <div class="div5">
		  	
		  </div>
		  <!-- 
			箭靶效果
				1、不用border，只用背景
				2、使用border
		   -->
		   <div class="div6">
				<div>
					<div>
						<div>
							
						</div>
					</div>
				</div>
		   </div>
		   
		   <!-- 
				使用border画一个三角形
				
			-->
			<div style="border-style: solid; width: 0; border-width: 100px; border-color: red blue yellow black;">
				
			</div>
			
			<!-- 
				css3提供了一个新属性box-sizing="border-box"
				箭靶效果
			 -->
			 <div class="div7">
			 	中
			 </div>
			 
			 <input type="text" />
			 <button type="button"></button>
			 
	</body>
</html>
